<template>
  <BasicModal
    v-bind="$attrs"
    @register="register"
    @ok="clickOk"
    title="回调父组件方法"
    :helpMessage="['将用户在本弹窗中操作后的数据，回调给父组件']"
  >
    <!--  绑定数据 -->
    <p> 用户id:<input class="b-1" v-model="user.id" /> </p>
    <p> 用户名:<input class="b-1" v-model="user.name" /> </p>
  </BasicModal>
</template>
<script lang="ts" setup>
  import { BasicModal, useModalInner } from '@/components/Modal';
  import { ref } from 'vue';

  // 创建组件
  const [register, { closeModal }] = useModalInner();

  interface User {
    id?: number;
    name?: string;
  }
  let user: User = ref({});

  // 使用 emits，定义可回调的父组件方法
  const emits = defineEmits(['handleData']);

  // 自定义 ok 方法，
  function clickOk() {
    // 回调父组件中的 handleData 方法
    emits('handleData', user.value);
    // ok按钮显示时，需要显示调用弹窗关闭方法
    closeModal();
  }
</script>
